<template>
  <div id="container">
    <div class="container-in">
      <div class="container-titles">
       <!-- <div class="titles-ins">苏州日报融媒体指挥大屏</div> -->
        <div class="titles-ins">融媒体指挥大屏</div>
      </div>

      <div class="container-inBox">
        <div class="container-l">
          <div class="container-l__left">
            <top-box />
            <pie-box />
            <article-box />
          </div>
          <div class="container-l__rigth">
            <middle-data />
            <app-box />
          </div>
        </div>
        <div class="container-r">
          <div class="container-r__left">
            <man-box />
          </div>
        </div>
        <div class="container-p" :class="{'py1': !dialogExpand, 'py2': dialogExpand}">
          <div style="width: 1120px">
          <div class="dialog1" v-if="dialog1Expand">
            <div class="dialog-l">
              <div class="dialog-l_left">
                <data-box-1 />
                <data-box-2 />
                <data-box-3 />
              </div>
              <div class="dialog-l_right">
                <journalism />
                <journalism-1 />
                <compilation />
              </div>
            </div>
          </div>
          <div class="dialog2" v-if="dialog2Expand">
            <div class="dialog-l">
              <div style="width:66%;height: 100%;overflow-x: scroll">
                <iframe src="https://news.seu.edu.cn/" style="width: 1300px;height: 100%"></iframe>
              </div>
              <div style="width: 33%;margin-left: 20px">
                <div style="position: relative;width:100%;height: 50%;overflow: hidden">
                  <iframe src="https://m.weibo.cn/u/1703010470" style="position: absolute;top: -210px;width:100%;height: 670px"></iframe>
                </div>
                <div style="position: relative;width:100%;height: 50%;overflow: hidden">
                  <iframe src="https://weixin.sogou.com/weixinwap?query=%E4%B8%9C%E5%8D%97%E5%A4%A7%E5%AD%A6&ie=utf8&s_from=input&type=2&pg=webSearchList&_sug_=n&_sug_type_=" style="position: absolute;top: -170px;width:100%;height: 645px;"></iframe>
                </div>
              </div>
            </div>
          </div>
            <div class="dialog3" v-if="dialog3Expand">
              <div class="dialog-l" style="height: 500px;position: absolute;bottom: 0;">
                <rank-box></rank-box>
              </div>
            </div>
          </div>
          <div>
          <div class="dialog-toggle dialog-toggle1" @click="toggleDialog1" v-show="dialog1Expand||!dialogExpand">
            <p><img :class="['icon-toggle',dialog1Expand?'icon-toggle-left':'']"
                    src="../assets/icon_right.png"></p>
            <p>任</p>
            <p>务</p>
            <p>信</p>
            <p>息</p>
          </div>
          <div class="dialog-toggle dialog-toggle2 " @click="toggleDialog2" v-show="dialog2Expand||!dialogExpand">
            <p><img :class="['icon-toggle',dialog2Expand?'icon-toggle-left':'']"
                    src="../assets/icon_right.png"></p>
            <p>校</p>
            <p>园</p>
            <p>网</p>
            <p>新</p>
            <p>闻</p>
            <p>信</p>
            <p>息</p>
          </div>
            <div class="dialog-toggle dialog-toggle1" :class="{'bottom':dialog3Expand}" @click="toggleDialog3" v-show="dialog3Expand||!dialogExpand">
              <p><img :class="['icon-toggle',dialog3Expand?'icon-toggle-left':'']"
                      src="../assets/icon_right.png"></p>
              <p>排</p>
              <p>行</p>
              <p>榜</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBox from "./topBox.vue";
import pieBox from "./pieBox.vue";
import articleBox from "./articleBox.vue";
import dataBox1 from "./dataBox1.vue";
import dataBox2 from "./dataBox2.vue";
import dataBox3 from "./dataBox3.vue";
import middleData from "./middleData.vue";
import appBox from "./appBox.vue";
// import mapBox from "./mapBox.vue";
import manBox from "./manBox.vue";
import journalism from "./journalism.vue";
import journalism1 from "./journalism1.vue";
import compilation from "./compilation.vue";
import RankBox from "./rankBox";
// import apis from "../../public/api";
export default {
  name: "index",
  components: {
    RankBox,
    topBox,
    pieBox,
    articleBox,
    dataBox1,
    dataBox2,
    dataBox3,
    middleData,
    appBox,
    // mapBox,
    manBox,
    journalism,
    journalism1,
    compilation
  },
  data() {
    return {
      dialogExpand:false,
      dialog1Expand:false,
      dialog2Expand:false,
      dialog3Expand:false,
    };
  },
  methods:{
    toggleDialog1(){
      if(this.dialog1Expand){
        this.dialogExpand = false;
        setTimeout(()=>{
          this.dialog1Expand = false;
        },600);
      }else{
        this.dialogExpand = this.dialog1Expand = true;
      }
    },
    toggleDialog2(){
      if(this.dialog2Expand){
        this.dialogExpand = false;
        setTimeout(()=>{
          this.dialog2Expand = false;
        },600);
      }else{
        this.dialogExpand = this.dialog2Expand = true;
      }
    },
    toggleDialog3(){
      if(this.dialog3Expand){
        this.dialogExpand = false;
        setTimeout(()=>{
          this.dialog3Expand = false;
        },600);
      }else{
        this.dialogExpand = this.dialog3Expand = true;
      }
    }
  }
};
</script>

<style lang="less">
#container {
  width: 100%;
  height: 100%;
  overflow: auto;
  color: #fff;
  h3 {
    color: #bdbeca;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .titleBox {
    width: 647px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 36px;
    color: #2aecfa;
    margin-bottom: 33px;
  }
}
.container-titles {
  height: 109px;
  width: 100%;
  margin-bottom: 16px;
  display: block;
  .titles-ins{
    margin: 0 auto;
    width: 1874px;
    height: 100px;
    background: url(../assets/img/title.gif) no-repeat center center / 100% 100%;
    font-size: 48px;
    text-align: center;
    line-height: 96px;
    font-family: MicrosoftYahei-Bold;
    color: #00B4FF;
    font-weight: bold;
  }
}
.container-in {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: url(../assets/img/bj.png) no-repeat center center / 100% 100%;

  .container-inBox {
    padding-left: 46px;
    display: flex;
    position: relative;
  }
}
.container-l {
  overflow: hidden;
  z-index: 99;
  &__left {
    width: 510px;
    float: left;
    margin-right: 17px;
  }
  &__rigth {
    float: left;
    width: 518px;
    margin-right: 20px;
    margin-top: 7px;
  }
}
.container-m {
  width: 736px;
  margin-right: 37px;
  overflow: hidden;
}
.container-r {
  display: flex;
  &__left {
    width: 780px;
  }
  &__right {
    width: 518px;
  }
}
.dialog1, .dialog2,.dialog3{
  display: flex;
  height:100%;
}
.dialog-toggle.bottom{
  position: absolute;
  bottom: 270px;
}
.container-p{
  width: 1166px;
  height: 955px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  transition: all 0.6s ease-out;
  z-index: 999;
  .dialog-l{
    width: 1120px;
    display: flex;
    background: #001054;
    &_left{
      width: 511px;
      margin: 0 31px;
    }
    &_right{
      width: 510px;
      margin-right: 27px;
    }
  }
  .dialog-r{
    width: 46px;
    height: 957px;
  }
  .dialog-r-2{
    width: 46px;
    height: 957px;
    margin-top: 300px;
  }
}
.container-p.py1{
  transform: translate(-1120px, 0);
}
.container-p.py2{
  transform: translate(0, 0);
}

.dialog-toggle {
  padding-top: 40px;
  text-align: center;
  width: 46px;
  font-size: 14px;
  color: #FFFFFF;
  background: url("../assets/dialog_close.png") no-repeat center center / 100% 100%;
}
.dialog-toggle1 {
  height: 230px;
}
.dialog-toggle2 {
  height: 330px;
}

.dialog-toggle > p {
  line-height: 26px;
}

.icon-toggle {
  width: 16px;
  height: 16px;
  transition: all 1s ease-in-out;

  &-left {
    transform: rotate(180deg);
  }
}
</style>
